: 여러 종류의 이미지를 웹문서에 삽입하기 위한 태그가 img태그이며,
: source의 약자인 'src'속성과 이미지가 나오지 않을 때 대체할 문자인 'alt'속성을 사용함
: 작성법) img src="삽입할 이미지의 주소/경로" alt="이미지낙 나오지 않을 때 대체 문구"
: 이미지 태그는 닫는 태그가 없는 것이 특징
: 웹문서에 삽입하는 이 미지의 종류 ) jpg(고화질), png(고화질, 배경투명, 로고나 아이콘에 사용), gif(256컬러 지원, 단순 아이콘, 투명한 이미지, 애니메이션에 사용)
img src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png" alt="다음 로고"
img src="./images/daum_logo.png" alt="다음 로고"
url(uniform resource locator) : 웹서버에 위치한 파이르 문서의 정확한 경로나 주소, 위치
절대 주소: http://~로 시작하는 주소를 말하며,
상대 주소: 현재 작성하고 있는 문서를 기준으로 주소가 결정되는 주소
상대주소는 현재 html 문서를 기준
- 하위폴더 : ./폴더명/파일명.확장자
- 상위폴더 : ../폴더명/파일명.확장자
- 동일한폴더 : 파일명.확장자
- 하위폴더 ) img src="./images/travel.jpg" alt="피그마로 제작한 배너 광고"
- 상위폴더 ) img src="../02_css3/mobile_logo.gif" alt="모바일 로고"
- 동일한폴더 ) img src="auction_logo.gif" alt="옥션로고"
- 이미지 경로가 잘못 작성 된 경우 대체되어 나오는 텍스트
- 이미지가 나오지 않을 때 사용자가 이해할 수 있는 대체 문자
- 시각장애인 스크린리더를 통해 음성으로 이해 할 수 있는 문자
- 웹접근성을 위해 반드시 작성해야 하는 속성
- svg(scale vector graphic) 의 약자로 벡터 방식을 사용하여 이미지가
확대 되어도 깨지지 않고 선명하게 나오는 이미지 파일 형식을 말함
- html5에서 새로 추가된 파일 확장자로서 보통 모바일 화면에서 화면 해상도에 따른 이미지를 깨끗하게 보여주기 위해서 사용하며, 로고/아이콘 등에 활용됨.
1. img태그를 사용하여 삽입
2. svg파일 더블클릭 -> 웹브라우저에서 이미지가 보여짐 -> 이때, 소스보기를 통해 해당 이미지 소스를 복사하여 웹페이지에 삽입